<template>
  <div class="session-panel">
    <div class="session-header">
      <el-button type="primary" @click="handleAdd">新建会话</el-button>
    </div>

    <div class="session-list">
      <template v-if="sessions.length">
        <SessionItem
            v-for="session in sessions"
            :key="session.id"
            :session="session"
            :active="activeSessionId === session.id"
            @edit="handleEditItem"
            @delete="handleDeleteItem"
            @click="handleItemClick"
        />
      </template>
      <div v-else class="empty-tip">
        暂无会话，点击上方按钮创建
      </div>
    </div>
  </div>
</template>

<script setup>
import SessionItem from './SessionItem.vue'

const props = defineProps({
  sessions: {
    type: Array,
    required: true
  },
  activeSessionId: {
    type: [String, Number],
    default: null
  }
})

const emit = defineEmits([
  'add',
  'delete',
  'edit',
  'switch'
])

// 删除计算属性isActive

const handleAdd = () => {
  emit('add')
}

const handleItemClick = (session) => {
  emit('switch', session.id)
}

const handleDeleteItem = (sessionId) => {
  emit('delete', sessionId)
  if (sessionId === props.activeSessionId) {
    emit('switch', null)
  }
}

const handleEditItem = (sessionId) => {
  emit('edit', sessionId)
}
</script>

<style scoped>
.session-panel {
  width: 200px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
  border-right: 1px solid #e4e7ed;
}

.session-header {
  padding: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.session-list {
  flex: 1;
  overflow-y: auto;
}

.empty-tip {
  padding: 20px;
  font-size: 12px;
  color: #909399;
  text-align: center;
}
</style>
